<%@page import="java.util.Arrays"%>
<%@page import="org.ifilm.model.Project"%>
<%@page import="java.util.List"%>
<%@page import="org.ifilm.controller.ProjectController"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Edit ${project.projectName}</title>
		
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/css/index.css" rel="stylesheet" />
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
		
		<script src="/film/js/jquery.js"></script>
		<script src="/film/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/film/js/jquery.validator.js"></script>
		<script src="/film/js/photoUpload.js"></script>
		
		<style>
			body {
				padding-top: 60px;
				/* 60px to make the container go all the way to the bottom of the topbar */
			}
			
			.classification {
				position: relative;
				width: 91px;
				height: 17px;
			}
			
			.classification .cover {
				position: absolute;
				background: transparent url(img/stars.png) top left no-repeat;
				top: 0px;
				left: 0px;
				width: 91px;
				height: 17px;
				z-index: 101;
			}
			
			.classification .progress {
				position: absolute;
				background: transparent url(img/stars_full.png) top left no-repeat;
				top: 0px;
				left: 0px;
				height: 17px;
				z-index: 102;
			}
		</style>
	</head>
	<body>
		<jsp:include page="navigationBar.jsp"/>		
		<div class="container">
			<form method="POST" action="/film/project/saveEdit.do?projectId=${project.id}">
				<table class="table table-condensed" width=100%>
					<h1>Edit ${project.projectName}</h1>
					<tr>
						<td width=60% >Project Picture :</td>
						<td>				
							<input type="hidden" id="thumbnailUrl" name="<%=GeneralConstants.projectThumbnailUrl%>" value="">
							<a href="#" id="uploadPhoto">
								<c:if test="${project.thumbnailUrl != null}">
									<img class="media-object" id="thumbnail" style="height: 200px; width: 200px;" src="/film/photo/getPhoto.do?fileName=${project.thumbnailUrl}">
								</c:if>
								
								<c:if test="${project.thumbnailUrl == null}">
									<img style="height: 200px; width: 200px;" id="thumbnail" class="media-object" src="http://placehold.it/200x200">
								</c:if>
							</a>
							<input type="file" name="fileData" id="image_file" />
						</td>
					</tr>
					<tr>
						<td>
							Name:
						</td>
						<td>
							<input type="text" placeholder="${project.projectName}" name="<%=GeneralConstants.projectName%>">
						</td>
					</tr>
					<tr>
						<td>
							Country and City:
						</td>
						<td>
							<div class="control-group">
						       	<div class="controls">
						         	<select id="country" name="<%=GeneralConstants.projectCountry%>">
						         		<option value="">${project.country}</option>
						         	</select>
						         	</br>
						         	<select id="city" name="<%=GeneralConstants.projectCity%>">
						         		<option value="">${project.city}</option>
						         	</select>
						     	</div>
						    </div>	
						</td>
					</tr>					
					<tr>
						<td>
							Estimated Start Date:
						</td>
						<td>
							<input type="date" placeholder="${project.startDate}" name="<%=GeneralConstants.projectStartDate%>">
						</td>
					</tr>
					<tr>
						<td>
							Estimated Release Date:
						</td>
						<td>
							<input type="date" placeholder="${project.releaseDate}" name="<%=GeneralConstants.projectReleaseDate%>">							
						</td>
					</tr>	
					<tr>
						<td>
							Language:
						</td>
						<td>						
							<div class="control-group">
						       	<div class="controls">
						         	<select id="language" name="<%=GeneralConstants.projectLanguage%>">
						         		<option value="">${project.language}</option>
						         	</select>
					         	</div>
				         	</div>				         	
						</td>	
					</tr>
					<tr>
						<td>
							Subject:
						</td>
						<td>
							<input type="text" placeholder="${project.subject}" name="<%=GeneralConstants.projectSubject%>">		
						</td>
					</tr>
					<tr>
						<td>
							Detailed Description:
						</td>
						<td>
						<textarea rows="5" placeholder="${project.description}"
							name="<%=GeneralConstants.projectDescription%>"></textarea>
						</td>
					</tr>	
					<tr>
						<td>
							<button class="btn btn-large btn-primary" type="submit">Submit</button>
						</td>
						<td></td>
					</tr>	
				</table>
			</form>
		</div>
	</body>
	<script type="text/javascript">
	
		function getXMLHttpRequest() {
     	   if (window.XMLHttpRequest) {
       	     return new window.XMLHttpRequest;
     	   } else {
		            try {
		                return new ActiveXObject("MSXML2.XMLHTTP.3.0");
		            } catch (e) {
		                return null;
		            }
		        }
		 	}
		
		$("#image_file").change(function() {
			fileSelected('thumbnail', 'image_file');
			
			var $this = $(this);
			
			var file = $this[0].files[0];
		     
	        var xhr = getXMLHttpRequest();
	        var url = "/film/photo/upload.do";
	        xhr.open("POST", url, true);
	        var formdata = new FormData();
	        formdata.append("fileData", file, "file.jpg");
	        
	        xhr.onreadystatechange = function () {
	            if (xhr.readyState === 4) {
	                if (xhr.status === 200) {
	                    var response = JSON.parse(xhr.response);
	                    if (response.fileName) {
	                        $("#thumbnailUrl").val(response.fileName);
	                    } else {
	                    	alert("Server error");
	                    }
	                } else {
	                	alert("Cannot upload this image!");
	                }
	            }
	        };
	        
	        xhr.ontimeout = function () {
	            onfail("request timeout");
	        };
			
	        xhr.send(formdata);
		});
		
		$.ajax("/film/util/getCountries.do").done(function(data) {
			if (data && data.countryList) {
				$.each(data.countryList, function(key, cur) {
					var option = $("<option countyId='" + cur.id + "' value='" + cur.countryName + "'></option>");
					
					option.append(cur.countryName);
					
					$("#country").append(option);
				});
			}
		});
		
		$.ajax("/film/util/getLanguages.do").done(function(data) {
			if (data && data.languageList) {
				$.each(data.languageList, function(key, cur) {
					
					var option = $("<option value='" + cur.languageName + "'></option>");
					
					option.append(cur.languageName);
					
					$("#language").append(option);
					
				});
			}
		});
		
		$("#country").change(function() {
			var countryId = $("#country option:selected").attr("countyId");
			
			if (countryId != "") {
				$('#city').find('option').remove();
				
				$.ajax("/film/util/getCitiesByCountryId.do?countryId=" + countryId).done(function(data) {
					$("#city").append("<option value=''>Choose a City</option>");
					if (data && data.cityList) {
						$.each(data.cityList, function(key, cur) {
							var option = $("<option value='" + cur.cityName + "'></option>");
							
							option.append(cur.cityName);
							
							$("#city").append(option);
						});
					}
					
					$("#city").show();
				});
			} else {
				$("#city").hide();
			}
		});
		
	</script>	
	
	
	
	
	<script src="/film/js/commonScripts.js"></script>
</html>